<template>
  <div id="Echarts" ref="charts"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Echarts',
  data() {
    return {
      chart: null
    }
  },

  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.chartInit()
      //展示加载动画
      // this.chart.showLoading()
    })
  },

  methods: {
    chartInit() {
      this.chart = echarts.init(this.$refs.charts, 'light')
      // console.log(this.option)
      this.chart.setOption(this.option)
    }
  },

  watch: {
    option: {
      handler(newVal, oldVal) {
        console.log(newVal)
        this.chart.setOption(newVal)
        // this.chart.hideLoading()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
#Echarts {
  flex: 1;
  width: 200px;
  height: 200px;
}
</style>
